import React,{ Component,Fragment } from 'react'
import 
{ HomeNowStyle,HomeListContainer,ProductImgContainer,ProductDetailContainer,ProductTitleContainer,ProductPriceContainer } 
from './HomeNowStyle'
import Footer from 'components/common/footer/Footer'


import {Link} from 'react-router-dom'

import HomeCommon from 'pages/home/HomeCommon'

// { props.image_url_set.dx_image.url[800] }

const Item = ( props ) => {
    return(
       
            <Link to={'/indedetail/'+props.hash_id}>  
                <HomeListContainer>
                    <ProductImgContainer>
                        <img src={ props.image_url_set.dx_image && props.image_url_set.dx_image.url[800] } />
                    </ProductImgContainer>
                    <ProductDetailContainer>
                        <ProductTitleContainer>
                           { props.name }
                        </ProductTitleContainer>
                        <ProductPriceContainer>
                            <div className="price_list">¥ 
                                <span className="price">{ props.jumei_price }</span>
                                <span className="del_price"> ¥{ props.market_price } </span>
                            </div>
                            <div className="comment">
                           { props.product_desc }
                            </div>
                        </ProductPriceContainer>
                    </ProductDetailContainer>
                </HomeListContainer>
             </Link>
             
            
    )
}

class HomeNow extends Component{



    componentDidMount () {
        this.props.getHomeLists(this.props.id)
       
    }

    componentDidUpdate () {
        // console.log(this.props.home_list)
        // console.log( this.props.home_list && this.props.home_list[19].image_url_set.dx_image.url[800] )
    }

    renderItem = () => {
        return this.props.home_list && this.props.home_list.map( (item,index) => {
            return <Item { ...item } key={item.product_id} index ={ index } />
        } )
    }
   render ( ) {
       return (
           <HomeNowStyle>
               { this.renderItem() }
               <Footer/>
           </HomeNowStyle>
       )
   }
}

export default HomeCommon(HomeNow)